<template>
  <div class="container">
    <div id="exhart6" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getCityData, getYSYXFXYJByMarketATy } from "../../util/home";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      option: {},
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getInit();
  },
  methods: {
    getInit() {
      getYSYXFXYJByMarketATy().then((res) => {
        let datas = res.data.data;
        this.option = {
          // backgroundColor: "#010A31",
          title: {
            text: "批次",
            top: "-1%",
            textStyle: {
              color: "#fff",
              fontSize: 12,
              //  type: 'dashed',
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            top: "10%",
            right: "3%",
            left: "5%",
            bottom: "12%",
            height: "80%",
          },
          xAxis: [
            {
              type: "category",
              data: datas.map((e) => e.name),
              axisLine: {
                lineStyle: {
                  color: "#3A67A1",
                  //  type: 'dashed',
                },
              },
              axisLabel: {
                show: true,
                color: "#fff",
                interval: 0,
                fontSize: 12,
                // formatter: function (val) {
                //   var strs = val.split(""); //字符串数组
                //   var str = "";
                //   for (var i = 0, s; (s = strs[i++]); ) {
                //     //遍历字符串数组
                //     str += s;
                //     if (!(i % 4)) str += "\n"; //按需要求余
                //   }
                //   return str;
                // },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              // name: "单位：人",
              nameTextStyle: {
                color: "#fff",
                fontSize: 16,
              },
              axisLabel: {
                formatter: "{value}",
                color: "#fff",
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  // type: 'dashed',
                  width: 1,
                  color: "#203C6D",
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#3A67A1", // "rgba(0,186,255,.6)"
                },
              },
            },
          ],
          series: [
            {
              type: "bar",
              data: datas.map((e) => e.jcsum),
              barWidth: "18px",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#DE7A36", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#96FCFD", // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                  // shadowColor:  "rgba(0,160,221,1)",
                  // shadowBlur: 4
                },
              },
              label: {
                normal: {
                  color: "#fff",
                  show: true,
                  formatter: "{c}",
                  position: "top",
                },
              },
            },
          ],
          dataZoom: [
            //滑动条
            {
              xAxisIndex: 0, //这里是从X轴的0刻度开始
              show: false, //是否显示滑动条，不影响使用
              type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 10, // 一次性展示6个。
            },
          ],
        };
        var myChart = echarts.init(document.getElementById("exhart6"), null, {
          devicePixelRatio: 2.5,
        });
        myChart.setOption(this.option);
        setInterval(() => {
          // 每次向后滚动一个，最后一个从头开始。
          if (this.option.dataZoom[0].endValue == datas.length) {
            this.option.dataZoom[0].endValue = 10;
            this.option.dataZoom[0].startValue = 0;
          } else {
            this.option.dataZoom[0].endValue =
              this.option.dataZoom[0].endValue + 1;
            this.option.dataZoom[0].startValue =
              this.option.dataZoom[0].startValue + 1;
          }
          myChart.setOption(this.option);
        }, 2000);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
}
</style>
